<template>
  <el-dialog
  :visible="isShow"
  width="30%"
  @close="btnClose"
  >
  <span slot="title" class="header">分享</span>
    <div class="txt" v-if='txtShow'>
      <textarea placeholder="一起聊聊吧~" v-model="news"></textarea>
      <div class="search" @click="search">
      <div class="search_a">
        <i class="wyy wyy-bofang"></i>
        <span>{{ mucis.name || '给动态配上音乐'}}</span>
      </div>
        <i class="el-icon-plus" ></i>
      </div>
    </div>
  <div class="mucis" v-else>
    <el-input type="search" v-model="mucisName" prefix-icon='el-icon-search' @change="searchMucis" @keyup.enter="searchMucis" >
    </el-input>
    <el-tabs type="border-card" >
      <el-tab-pane label="单曲" class="card">
      <div  v-for="v in mucisList" :key="v.id">
        <el-row type="flex" justify="space-between" class="row"  @click.native="checkMucis(v)">
          <el-col :span="2">
            <i class="wyy wyy-bofang"></i>
          </el-col>
          <el-col :span="6" class="f-thide">{{ v.name }}</el-col>
          <el-col :span="8" class="f-thide">{{ v | conStr }}</el-col>
         </el-row>
      </div>

      </el-tab-pane>
      <el-tab-pane label="歌手">不能用</el-tab-pane>
      <el-tab-pane label="专辑">不能用</el-tab-pane>
      <el-tab-pane label="歌单">不能用</el-tab-pane>
      <el-tab-pane label="声音主播">不能用</el-tab-pane>
    </el-tabs>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="btnClose">取 消</el-button>
    <el-button type="primary" @click="btnOk">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
import { share, searchMucis } from '@/api/index'
export default {
  props: {
    isShow: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      activeName: 'first',
      news: '',
      txtShow: true,
      mucisName: '',
      mucisList: [],
      mucis: {}
    }
  },
  methods: {
    search () {
      this.txtShow = false
    },
    async searchMucis () {
      if (this.mucisName.trim()) {
        const { data } = await searchMucis({
          keywords: this.mucisName
        })
        this.mucisList = data.result.songs
      }
    },
    btnClose () {
      this.news = ''
      this.$emit('update:isShow', false)
    },
    async btnOk () {
      try {
        await share({
          id: this.mucis.id,
          msg: this.news
        })
        this.$emit('reset')
        this.btnClose()
      } catch (err) {
        console.log(err, 'hijii')
      }
    },
    checkMucis (obj) {
      console.log(1)
      this.mucis = obj
      this.txtShow = true
      this.mucisName = ''
    }

  },
  filters: {
    // 拼接名字
    conStr: function (data) {
      if (data.artists) {
        const arr = []
        data.artists.forEach(v => {
          if (v.name) {
            arr[arr.length] = v.name
          }
        })
        const str = arr.join('/')
        return str
      }
    }
  }
}
</script>

<style scoped lang="less">
  .header{
    height: 38px;
    line-height: 38px;
    font-weight: bold;
    font-size: 14px;
    color: #000;
  }
  /deep/ .el-dialog__body{
    padding: 0 20px 30px 30px;
  }
  .txt {
    width: 450px;
    padding: 5px;
    border: 1px solid #ccc;
    textarea{
      width: 100%;
      height: 120px;
      resize: none;
      overflow: auto;
      outline:none;
      border: 0;
      border-bottom: 1px solid #ccc;
    }
    .search{
      padding: 0 5px;
      height: 45px;
      display: flex;
      justify-content:space-between;
      align-items: center;
      .search_a{
        display: flex;
        align-items: center;
         .wyy-bofang{
        font-size: 30px;
        color: red;
         }
      span{
        margin-left: 10px;
         }
      }

    }
  }
  .mucis{
    width: 450px;
    padding: 5px;
    // border: 1px solid #ccc;
    .list{
      width: 100%;
      display: flex;
      flex: 1;
    }
  //  /deep/ .el-tabs__content {
  //     height: 200px;
  //   }
    .card{
      height: 196px;
      overflow: auto;
      overflow-x: hidden;
      .row{
        height: 30px;
        line-height: 30px;
      }
      .row:nth-child(even){
        background-color: pink;
      }
    }
    .f-thide{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    }
  }
</style>
